<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股票数据实时监控</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 0;
      background-color: #f4f4f9;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #4CAF50;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    .loading {
      text-align: center;
      font-size: 18px;
      color: #666;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>股票数据实时监控</h1>
  <div id="loading" class="loading">正在加载数据...</div>
  <table id="stockTable" style="display: none;">
    <thead>
      <tr>
        <th>序号</th>
        <th>代码</th>
        <th>名称</th>
        <th>最新价</th>
        <th>涨跌幅</th>
        <th>涨跌额</th>
        <th>成交量</th>
        <th>成交额</th>
        <th>最高</th>
        <th>最低</th>
        <th>今开</th>
        <th>昨收</th>
        <th>量比</th>
        <th>换手率</th>
        <th>市盈率-动态</th>
        <th>市净率</th>
        <th>总市值</th>
        <th>流通市值</th>
        <th>涨速</th>
        <th>5分钟涨跌</th>
        <th>60日涨跌幅</th>
        <th>年初至今涨跌幅</th>
      </tr>
    </thead>
    <tbody id="tableBody"></tbody>
  </table>

  <script>
    // 定义 API 地址
    const apiUrl = 'http://linkonet.nat300.top/api/public/stock_zh_a_spot_em';

    // 定义一个函数来获取数据并更新表格
    async function fetchDataAndUpdateTable() {
      const loadingDiv = document.getElementById('loading');
      const table = document.getElementById('stockTable');
      const tableBody = document.getElementById('tableBody');

      // 显示加载提示
      loadingDiv.style.display = 'block';
      table.style.display = 'none';

      try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // 清空表格内容
        tableBody.innerHTML = '';

        // 遍历数据并生成表格行
        data.forEach((stock, index) => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${index + 1}</td>
            <td>${stock.代码}</td>
            <td>${stock.名称}</td>
            <td>${stock.最新价}</td>
            <td>${stock.涨跌幅}%</td>
            <td>${stock.涨跌额}</td>
            <td>${stock.成交量}</td>
            <td>${stock.成交额}</td>
            <td>${stock.最高}</td>
            <td>${stock.最低}</td>
            <td>${stock.今开}</td>
            <td>${stock.昨收}</td>
            <td>${stock.量比}</td>
            <td>${stock.换手率}%</td>
            <td>${stock.市盈率动态}</td>
            <td>${stock.市净率}</td>
            <td>${stock.总市值}</td>
            <td>${stock.流通市值}</td>
            <td>${stock.涨速}</td>
            <td>${stock.五分钟涨跌}</td>
            <td>${stock.六十日涨跌幅}%</td>
            <td>${stock.年初至今涨跌幅}%</td>
          `;
          tableBody.appendChild(row);
        });

        // 隐藏加载提示，显示表格
        loadingDiv.style.display = 'none';
        table.style.display = 'table';
      } catch (error) {
        console.error('获取数据时出错:', error);
        loadingDiv.textContent = '数据加载失败，请稍后重试。';
      }
    }
    // 修改为每隔 10 分钟（600000 毫秒）刷新一次
    setInterval(fetchDataAndUpdateTable, 600000);
    // 初始化页面时立即加载数据
    fetchDataAndUpdateTable();
  </script>
</body>
</html>